<template>
    <div class="gallary" @click="handleClickGallary">
        <div class="wrapper">
         <swiper :options='swiperOption' ref='mySwiper'>
           <swiper-slide v-for='item of this.imgList' :key='item.id' >
                <img class='gallary-img' :src="item" alt="">
            </swiper-slide>
            <div class='swiper-pagination' slot='pagination'></div>
            </swiper>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Gallary',
  props: {
    imgList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observeParents: true,
        observer: true
      }
    }
  },
  methods: {
    handleClickGallary () {
      this.$emit('closeGallary')
    }
  }
}
</script>
<style lang="stylus" scoped>
.swiper-container
    overflow :inherit
.swiper-container >>> .swiper-pagination
    bottom:-1rem
    color:#fff
    overflow :inherit
.gallary
    position :fixed
    top:0
    left:0
    bottom:0
    right :0
    z-index:99
    background:#000
    display flex
    flex-direction :column
    justify-content center
    .wrapper
        height:0
        padding-bottom:100%
        overflow :inherit
        .gallary-img
            width:100%
</style>
